<template>
	<view>
		
		<view class='uni-fab__circle--rightBottom uni-fab__circle uni-fab__plus' @click="showDetailLists">
			<view style="color:#FFFFFF;">详 情</view>
		</view>
		
		<!-- <uni-fab ref="fab" horizontal="right" vertical="bottom" @fabClick="showDetailLists" :popMenu="false" /> -->
		
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					打卡日期
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="checkDate" :start="checkStartDate" :end="checkEndDate" @change="bindCheckDateChange">
						<view class="uni-input">{{checkDate}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-steps">
			<view class="uni-steps__column">
				<view class="uni-steps__column-text-container">
					<view key="clockInKey" class="uni-steps__column-text">
						<text :class="['check-active-color', 'uni-steps__column-title']">上班打卡</text>
						<text :class="['check-active-color', 'uni-steps__column-desc']">{{userCheckInfo.clockInDate}}</text>
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-if="userCheckInfo.clockInPicUrl">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" mode="scaleToFill" :src="userCheckInfo.clockInMinPicUrl" :data-src="userCheckInfo.clockInPicUrl" @tap="previewImage"></image>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-else>
									<view class="uni-uploader__input" @tap="chooseImage('checkIn')"></view>
								</view>
							</view>
						</view>
						<view class="button-sp-area" v-if="checkInCachePic">
							<button type="primary" plain="true" size="mini" @click="chockInSubmit">上班打卡</button>
							<button style="margin-left: 15rpx;" type="warn" plain="true" size="mini" @click="chockInCancel">取消</button>
						</view>
					</view>
					
					<view key="clockOutKey" class="uni-steps__column-text">
						<text :class="[userCheckInfo.hasClockIn ? 'check-active-color' : 'check-deactive-color', 'uni-steps__column-title']">下班打卡</text>
						<text :class="[userCheckInfo.hasClockIn ? 'check-active-color' : 'check-deactive-color', 'uni-steps__column-desc']">{{userCheckInfo.clockOutDate}}</text>
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-if="userCheckInfo.clockOutPicUrl" >
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" mode="scaleToFill" :src="userCheckInfo.clockOutMinPicUrl" :data-src="userCheckInfo.clockOutPicUrl" @tap="previewImage"></image>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-else-if="userCheckInfo.hasClockIn" >
									<view class="uni-uploader__input" @tap="chooseImage('checkOut')"></view>
								</view>
								<view class="uni-uploader__input-box" v-else >
								</view>
							</view>
						</view>
						
						<view class="button-sp-area" v-if="checkOutCachePic">
							<button type="primary" plain="true" size="mini" @click="chockOutSubmit">下班打卡</button>
							<button style="margin-left: 15rpx;" type="warn" plain="true" size="mini" @click="chockOutCancel">取消</button>
						</view>
					</view>
					
				</view>
				<view class="uni-steps__column-container">
					<view :class="['uni-steps__column-line-item']" key="clockInKey">
						<view :class="['uni-steps__column-line','uni-steps__column-line--before', 'check-active-background-color']"></view>
						<view :class="['uni-steps__column-check']">
							<uni-icons color="#00aaff" type="circle-filled" size="14"></uni-icons>
						</view>
						<view :class="['uni-steps__column-line','uni-steps__column-line--after', 'check-active-background-color']"></view>
					</view>
					
					
					<view :class="['uni-steps__column-line-item']" key="clockOutKey">
						<view :class="['uni-steps__column-line','uni-steps__column-line--before', 'check-active-background-color']"></view>
						<view :class="['uni-steps__column-check']" v-if="userCheckInfo.hasClockIn">
							<uni-icons color="#00aaff" type="circle-filled" size="14"></uni-icons>
						</view>
						<view :class="['uni-steps__column-circle', 'check-active-background-color']" v-else></view>
						<view :class="['uni-steps__column-line','uni-steps__column-line--after', userCheckInfo.hasClockIn?'check-activeColor-background-color':'check-deactiveColor-background-color']"></view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import permision from "@/common/permission.js"
	import { userClockIn, userClockOut, getUserCheckInfoByDay } from '@/api/userCheckInfo.js'
	import { userCheckInfoImgUrl, userCheckInfoMinImgUrl } from '@/utils/index.js'
	import { uploadUserCheckImage } from '@/api/uploadFile.js'
	
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 2;
		} else if (type === 'end') {
			//year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		onLoad() {
			this.checkInCachePic = '';
			this.checkOutCachePic = '';
			this.checkDate = getDate({ format: true });
			this.getUserCheckInfo();
		},
		onShow() {
		},
		onHide() {
			// this.checkInCachePic = '';
			// this.checkOutCachePic = '';
			// this.userCheckInfo = {};
		},
		data() {
			return {
				// 日期选择
				checkDate: getDate({
					format: true
				}),
				checkStartDate:getDate('start'),
				checkEndDate:getDate('end'),
				
				// 打卡数据
				userCheckInfo:{
					id: undefined,
					belongsDate: undefined,
					hasClockIn: false,
					clockInDate: undefined,
					clockInPicUrl: undefined,
					clockInMinPicUrl: undefined,
					hasClockOut: false,
					clockOutDate: undefined,
					clockOutPicUrl: undefined,
					clockOutMinPicUrl: undefined
				},
				checkInCachePic: '',
				checkOutCachePic: '',
				
				workerTypeLists:[],
			}
		},
		methods: {
			// 调用接口，获取用户打卡信息
			getUserCheckInfo() {
				getUserCheckInfoByDay(this.checkDate).then(resp => {
					var data = resp.datas[0];
					this.userCheckInfo = {
						hasClockIn: false,
						hasClockOut: false
					}
					if(!data){
						return;
					}
					if(data.clockInDate) {
						this.userCheckInfo.hasClockIn = true;
						this.userCheckInfo.clockInDate = data.clockInDate;
					}
					if(data.clockOutDate) {
						this.userCheckInfo.hasClockOut = true;
						this.userCheckInfo.clockOutDate = data.clockOutDate;
					}
					this.userCheckInfo.clockInPicUrl = userCheckInfoImgUrl(data.clockInPicUrl);
					this.userCheckInfo.clockInMinPicUrl = userCheckInfoMinImgUrl(data.clockInPicUrl);
					this.userCheckInfo.clockOutPicUrl = userCheckInfoImgUrl(data.clockOutPicUrl);
					this.userCheckInfo.clockOutMinPicUrl = userCheckInfoMinImgUrl(data.clockOutPicUrl);
				})
			},
			// 选择日期
			bindCheckDateChange: function(e) {
				this.checkDate = e.detail.value;
				this.getUserCheckInfo();
				
				this.checkInCachePic = undefined
				this.checkOutCachePic = undefined
			},
			chockInSubmit: function(){
				userClockIn({ PicUrl: this.checkInCachePic, BelongsDate: this.checkDate }).then(resp => {
					this.checkInCachePic = undefined
					this.getUserCheckInfo();
				})
			},
			chockInCancel: function(){
				this.userCheckInfo.clockInPicUrl = undefined;
				this.userCheckInfo.clockInMinPicUrl = undefined;
				this.checkInCachePic = undefined;
			},
			chockOutSubmit: function(){
				userClockOut({ PicUrl: this.checkOutCachePic, BelongsDate: this.checkDate }).then(resp => {
					this.checkOutCachePic = undefined
					this.getUserCheckInfo();
				})
			},
			chockOutCancel: function(){
				this.userCheckInfo.clockOutPicUrl = undefined;
				this.userCheckInfo.clockOutMinPicUrl = undefined;
				this.checkOutCachePic = undefined;
			},
			chooseImage: async function(type) {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
				// #endif
				uni.chooseImage({
					sourceType: ['album'],
					sizeType: ['original'],
					count: 1,
					success: (res) => {
						uni.showToast({
							title: "图片上传中",
							duration: 2147483647,
							icon: "loading"
						});
						uploadUserCheckImage(res.tempFilePaths[0]).then(resp => {
							if(type === "checkIn") {
								this.userCheckInfo.clockInPicUrl = res.tempFilePaths[0]; 
								this.userCheckInfo.clockInMinPicUrl = res.tempFilePaths[0]; 
								this.checkInCachePic = resp.datas;
							}
							else if (type === 'checkOut') {
								this.userCheckInfo.clockOutPicUrl = res.tempFilePaths[0]; 
								this.userCheckInfo.clockOutMinPicUrl = res.tempFilePaths[0]; 
								this.checkOutCachePic = resp.datas;
							}
							uni.hideToast();
						})
						.catch(error => {
							uni.showToast({
								icon:"none",
								title: error,
								duration: 1500
							})
						});
					}
				})
			},
			
			// 图片全屏查看
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: [current]
				})
			},
			
			// 检查设备权限
			async checkPermission() {
				let status = permision.isIOS 
					? await permision.requestIOS('album') 
					: await permision.requestAndroid('android.permission.READ_EXTERNAL_STORAGE');

				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			showDetailLists: function() {
				uni.navigateTo({
					url: "/pages/userCheckInfo/userCheckDetail?belongsDate="+ encodeURIComponent(this.checkDate)
				})
			}
		}
	}
</script>

<style scoped>
	@charset "UTF-8";
	.cell-pd {
		padding: 22rpx 30rpx;
	}

	.list-pd {
		margin-top: 50rpx;
	}
	
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	
	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	.example {
		padding: 0 15px 15px;
	}
	
	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	/* #endif */
	.example {
		padding: 0 15px;
	}
	
	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}
	
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}
	
	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}
	
	.uni-steps {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row-reverse;
	}

	.uni-steps__row-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
	}

	.uni-steps__row-text {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}

	.uni-steps__column-text {
		padding: 6px 0px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #e5e5e5;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row-title {
		font-size: 14px;
		line-height: 16px;
		text-align: center;
	}

	.uni-steps__column-title {
		font-size: 14px;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-desc {
		font-size: 12px;
		line-height: 14px;
		text-align: center;
	}

	.uni-steps__column-desc {
		font-size: 12px;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-container {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		width: 30px;
		flex-direction: column;
	}

	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 14px;
		line-height: 14px;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__column-line-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__row-line {
		flex: 1;
		height: 1px;
		background-color: #999;
	}

	.uni-steps__column-line {
		width: 1px;
		background-color: #999;
	}

	.uni-steps__row-line--after {
		transform: translateX(1px);
	}

	.uni-steps__column-line--after {
		flex: 1;
		transform: translate(0px, 1px);
	}

	.uni-steps__row-line--before {
		transform: translateX(-1px);
	}

	.uni-steps__column-line--before {
		height: 6px;
		transform: translate(0px, -1px);
	}

	.uni-steps__row-circle {
		width: 5px;
		height: 5px;
		border-radius: 100px;
		background-color: #999;
		margin: 0px 3px;
	}

	.uni-steps__column-circle {
		width: 5px;
		height: 5px;
		border-radius: 100px;
		background-color: #999;
		margin: 4px 0px 5px 0px;
	}

	.uni-steps__row-check {
		margin: 0px 6px;
	}

	.uni-steps__column-check {
		height: 14px;
		line-height: 14px;
		margin: 2px 0px;
	}
    .button-sp-area {
        margin-left:5rpx;
		margin-top: 10rpx;
        width: 80%;
    }
	.check-active-color {
		color: #00aaff;
	}
	.check-deactive-color {
		color: #999999;
	}
	.check-active-background-color {
		backgroundColor: #00aaff;
	}
	.check-deactive-background-color {
		backgroundColor: #999999;
	}
	.check-transparent-background-color {
		backgroundColor: transparent;
	}
	
	
	
	
	
	.uni-fab__circle {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		background-color: #00aaff;
		border-radius: 55px;
		z-index: 11;
	}
	
	.uni-fab__plus {
		font-weight: bold;
	}
	.uni-fab__plus--active {
		transform: rotate(135deg);
	}
	.uni-fab__circle--rightBottom {
		right: 15px;
		bottom: 30px;
		/* #ifdef H5 */
		bottom: calc(30px + var(--window-bottom));
		/* #endif */
	}
</style>
